/*
 * 博客分类标签组件 - Category Tags Component
 * 显示可选择的博客分类标签，支持点击筛选
 */

import React, { useState } from 'react';
import { Category } from '@/models/category';
import styles from './index.less';

interface CategoryTagsProps {
  categories: Category[];
  onCategorySelect?: (categoryId: number | null) => void;
}

const CategoryTags: React.FC<CategoryTagsProps> = ({ 
  categories = [], 
  onCategorySelect 
}) => {
  const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
  const [hoveredCategory, setHoveredCategory] = useState<number | null>(null);

  const handleTagClick = (categoryId: number) => {
    // 如果点击的是当前选中的分类，则取消选择
    if (selectedCategory === categoryId) {
      setSelectedCategory(null);
      onCategorySelect && onCategorySelect(null);
    } else {
      setSelectedCategory(categoryId);
      onCategorySelect && onCategorySelect(categoryId);
    }
  };

  const [isBarHovered, setIsBarHovered] = useState(false);

  return (
    <div className={styles.categoryContainer}>
      <div 
        className={`${styles.categoryBar} ${isBarHovered ? styles.hovered : ''}`}
        onMouseEnter={() => setIsBarHovered(true)}
        onMouseLeave={() => setIsBarHovered(false)}
      >
        <div className={styles.categoryTitle}>博客分类</div>
        <div className={styles.categoryTags}>
          {/* 添加一个"全部"选项 */}
          <div
            className={`${styles.categoryTag} ${selectedCategory === null ? styles.selected : ''} ${hoveredCategory === null && selectedCategory !== null ? styles.hovered : ''}`}
            onClick={() => {
              setSelectedCategory(null);
              onCategorySelect && onCategorySelect(null);
            }}
            onMouseEnter={() => setHoveredCategory(null)}
            onMouseLeave={() => setHoveredCategory(undefined)}
          >
            全部
          </div>
          
          {categories.map((category) => (
            <div
              key={category.id}
              className={`${styles.categoryTag} ${selectedCategory === category.id ? styles.selected : ''} ${hoveredCategory === category.id ? styles.hovered : ''}`}
              onClick={() => handleTagClick(category.id)}
              onMouseEnter={() => setHoveredCategory(category.id)}
              onMouseLeave={() => setHoveredCategory(undefined)}
            >
              {category.categoryName}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CategoryTags;